<template>
  <el-table :data="tableData" :cell-style="cellStyle">
    <el-table-column type="index" />
    <el-table-column prop="assessedTeacher" label="被考核老师" width="150" />
    <el-table-column prop="name" label="考核与评价">
      <template #default="scope">
        <el-input v-model="scope.row.assessmentEvaluation" placeholder="请输入考核与评价" />
      </template>
    </el-table-column>
    <el-table-column prop="address" label="记事" width="250">
      <template #default="scope">
        <el-input v-model="scope.row.notes" placeholder="请输入记事" />
      </template>
    </el-table-column>
  </el-table>
  <div class="actionBtn flex">
    <el-button type="primary" @click="save" :loading="loading">保 存</el-button>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
import useCounterStore from "@/store/counter";
import { ref } from "vue";
const counter = useCounterStore();
let props = defineProps(["info"]);

// 注入普通方法
const getClassInfo = inject("getClassInfo");

let tableData = ref([]);
let loading = ref(false);

function cellStyle({ row, column, rowIndex, columnIndex }) {
  if ([2, 3].includes(columnIndex)) {
    return { "background-color": "rgba(252, 235, 156, 0.2)" };
  }
}

function getInfo() {
  if (props.info.hasOwnProperty("assessmentRecord")) {
    tableData.value = [{ ...props.info.assessmentRecord }];
  } else {
    tableData.value = [
      {
        assessedTeacher: props.info.teachingTeacher,
        assessedTeacherId: props.info.teachingTeacherId,
        assessmentEvaluation: "",
        notes: "",
      },
    ];
  }
}

async function save() {
  try {
    loading.value = true;
    await proxy.$apis.classData({
      type: "update",
      data: {
        _id: props.info._id,
        assessmentRecord: tableData.value[0],
      },
    });
    proxy.$utils.showToast("保存成功");
    getClassInfo(); // 调用后输出日志
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

watch(
  () => props.info,
  (newValue, oldValue) => {
    if (newValue) getInfo();
  },
  { immediate: true, deep: true }
);
</script>



<style lang="scss" scoped>
.actionBtn {
  justify-content: flex-end;
  margin-top: 15px;
}
</style>

